<template>
    <div>
        <h1>customRef() 自定义ref</h1>
        <h3>
            customRef()
            创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
        </h3>
        <div>
            <input type="text" v-model="message">
            <button type="button" @click="editCustomRef">修改自定义ref对象(防抖)</button>
        </div>
    </div>
</template>


<script lang="ts">
export default {
    name: 'diyDemo38'
}
</script>

<script setup lang='ts'>
import { useDebouncedRef } from '@/untils/useDebouncedRef';

// customRef()
// 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
let message = useDebouncedRef('王德发')

console.log(message);

// 修改输入框的值 修改自定义ref对象(防抖)
const editCustomRef = () => {
    message.value = '朋友别哭'
}

</script>

<style></style>